<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .tag-box .tag-item {
        margin: 10px;
        border: 1px solid hotpink;
        border-radius: 5px;
        padding: 5px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        position: relative;
        box-shadow: pink 0 0 5px 5px;
      }

      .tag-box .tag-item .close {
        display: block;
        padding: 5px;
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(50%, -50%) rotate(45deg);
      }

      .tag-box .tag-item .close::before {
        content: '';
        display: block;
        width: 10px;
        height: 1px;
        background-color: red;
      }

      .tag-box .tag-item .close::after {
        content: '';
        display: block;
        width: 10px;
        height: 1px;
        background-color: red;
        transform: rotate(90deg);
      }
      .tag-box .tag-input {
        height: 30px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <tags :list="tagList" @add="onAddTag($event)" @del="onDelTag"></tags>
      <tags :list="hobbiesList" @add="onAddHobby($event)" @del="onDelHobby"></tags>
    </div>

    <template id="tags">
      <div class="tag-box">
        <div v-for="v in list" :key="v" class="tag-item">
          {{ v }}
          <div class="close" @click="onClose(v)"></div>
        </div>
        <input type="text" v-model.trim="tagName" class="tag-input" placeholder="请输入标签名" @keyup.enter="onEnter" />
      </div>
    </template>

    <script src="../vue.js"></script>
    <script>
      Vue.component('tags', {
        template: '#tags',
        props: {
          list: { type: Array, default: () => [] },
        },
        data() {
          return { tagName: '' };
        },
        methods: {
          onClose(tagName) {
            this.$emit('del', tagName);
          },
          onEnter() {
            if (this.tagName === '') {
              return alert('请输入标签名称');
            }
            if (this.list.some((v) => v === this.tagName)) {
              return alert('该标签已存在');
            }
            // 触发自定义事件，通过父组件添加该标签
            this.$emit('add', this.tagName);
            this.tagName = '';
          },
        },
      });

      new Vue({
        el: '#app',
        data: {
          tagList: ['朋友', '男票', '女票', '基友'],
          hobbiesList: ['吃饭', '睡觉', '打豆豆'],
        },
        methods: {
          onDelHobby(tagName) {
            // 这里可能在真实场景下需要发送请求更新数据
            this.hobbiesList = this.hobbiesList.filter((v) => v !== tagName);
          },
          onAddHobby(tagName) {
            // 这里可能在真实场景下需要发送请求更新数据
            this.hobbiesList.push(tagName);
          },
          onDelTag(tagName) {
            // 这里可能在真实场景下需要发送请求更新数据
            this.tagList = this.tagList.filter((v) => v !== tagName);
          },
          onAddTag(tagName) {
            // 这里可能在真实场景下需要发送请求更新数据
            this.tagList.push(tagName);
          },
        },
      });
    </script>
  </body>
</html>
